  <template>

    <h1>普通用法</h1>
    <el-select v-model="username">
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>

    <h1>有禁用选项</h1>
    <el-select v-model="username">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :disabled="item.disabled" />
    </el-select>

    <h1>禁用选择器</h1>
    <el-select disabled v-model="username">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id" />
    </el-select>

    <h1>可清空单选</h1>
    <el-select clearable v-model="username">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id" />
    </el-select>

    <h1>基础多选</h1>
    <el-select  v-model="username" multiple>
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id" />
    </el-select>

    <h1>事件</h1>
    <el-select  v-model="username" multiple @change="A">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id" />
    </el-select>

    <h1>方法</h1>
    <el-select  v-model="username" multiple ref="selects">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id" />
    </el-select>
    <el-button @click="selectFocus">点击聚焦</el-button>

  </template>

<script setup>
import { ref } from 'vue'

const username = ref()


const options = [
  {id: 1, name: "张三"},
  {id: 2, name: "李四"},
  {id: 3, name: "王五",disabled: true},
  {id: 4, name: "赵六"},
  {id: 5, name: "秦七"},
  {id: 6, name: "肥八"}
]


const A = (value)=> {
  console.log(value)
}

const selects = ref('')
const selectFocus = ()=> {
  selects.value.focus()
}


</script>

<style scoped>

</style>